<template>
    <view>
        <view class="uni-margin-wrap">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                :duration="duration" indicator-active-color="#0173DE" indicator-color="#fff">
                <swiper-item v-for="(item, index) in list" :key="index">
                    <view class="swiper-item uni-bg-red">
                        <image :src="item.cover_cdn"></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <!-- 预约表单 -->
        <view class="project">
            <u--form :model="project" ref="add" :errorType="errorType" :rules="rules">
                <!-- 选择的服务 -->
                <view class="item">
                    <u-form-item label="预约服务" labelWidth="70" prop="projectname" @click="ProShow = true">
                        <u--input v-model="project.projectname" disabled disabledColor="#ffffff" placeholder="请选择预约服务"
                            border="none">
                        </u--input>
                        <u-icon slot="right" name="arrow-right">
                        </u-icon>
                    </u-form-item>
                </view>

                <!-- 预约的上门地址 -->
                <view class="item">
                    <u-form-item label="上门地址" labelWidth="70" prop="address" @click="AddrShow = true">
                        <u--input v-model="project.address" disabled disabledColor="#ffffff" placeholder="请选择上门地址"
                            border="none">
                        </u--input>
                        <u-icon slot="right" name="arrow-right">
                        </u-icon>
                    </u-form-item>
                </view>

                <!-- 预约时间 -->
                <view class="item">
                    <u-form-item label="预约时间" labelWidth="70" prop="createtime_text" @click="DateShow = true">
                        <u--input v-model="project.createtime_text" disabled disabledColor="#ffffff"
                            placeholder="请选择预约时间" border="none">
                        </u--input>
                        <u-icon slot="right" name="arrow-right">
                        </u-icon>
                    </u-form-item>
                </view>

                <!-- 预约备注 -->
                <view class="item">
                    <u-form-item labelWidth="70" prop="content">
                        <u--textarea v-model="project.content" placeholder="请输入预约备注" height="70" count="true">
                        </u--textarea>
                    </u-form-item>
                </view>

                <!-- 提交按钮 -->
                <view class='but'>
                    <button form-type="submit" :customStyle="BtnStyle" @click="submit">我要预约</button>
                </view>
            </u--form>
        </view>

        <!-- 预约服务的选择器 -->
        <u-picker :show="ProShow" :columns="prolist" keyName="name" @confirm="ProChange" @cancel="ProShow = false">
        </u-picker>

        <!-- 上门地址 -->
        <u-picker :show="AddrShow" :columns="addrlist" keyName="name" @confirm="AddrChange" @cancel="AddrShow = false">
        </u-picker>

        <u-datetime-picker ref="datetimePicker" :show="DateShow" mode="datetime" v-model="project.createtime"
            @confirm="DateChange" @cancel="DateShow = false">
        </u-datetime-picker>


        <!-- 消息提示的组件 -->
        <u-toast ref="notice"></u-toast>
        <u-notify ref="uNotify"></u-notify>
    </view>
</template>
<script>
import parse from 'postcss-comment/lib/parse'
export default {
    data() {
        return {
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
            list: [],
            LoginUser: null,
            errorType: ['toast'],
            prolist: [],
            ProShow: false,
            addrlist: [],
            AddrShow: false,
            DateShow: false,
            project: {
                projectid: 0,
                projectname: '',
                addrid: 0,
                address: '',
                createtime: Number(new Date()),
                createtime_text: '',
                content: ''
            },
            rules: {
                projectname: [
                    {
                        required: true,
                        message: '请选择预约服务',
                        trigger: ['change', 'blur'],
                    }
                ],
                address: [
                    {
                        required: true,
                        message: '请选择上门地址',
                        trigger: ['change', 'blur'],
                    }
                ],
                createtime_text: [
                    {
                        required: true,
                        message: '请选择预约时间',
                        trigger: ['change', 'blur'],
                    }
                ],
            },
        }
    },

    async onShow() {
        this.$u.auth.check()

        // 获取本地存储的信息
        let LoginUser = uni.getStorageSync('LoginUser')

        this.LoginUser = LoginUser

        let result = await this.$u.api.index.banner();

        this.list = result.data

        this.ProType()

        this.AddressList()

        this.$refs.add.setRules(this.rules)
    },
    methods: {
        process() {
            this.$u.route({
                url: '/pages/process/process',
                type: 'navigateTo',
            })
        },
        async ProType()
        {
            let result = await this.$u.api.project.ProjectType()

            let data = []

            this.prolist = []

            // console.log(this.prolist)

            // return false

            if(result.code == 1)
            {
                for(let item of result.data)
                {
                    data.push(item)
                }
            }

            this.prolist.push(result.data)
        },
        ProChange(item)
        {
            let value = item.value[0]

            this.project.projectid = value.id

            this.project.projectname = value.name

            this.ProShow = false
        },
        async AddressList()
        {
            let data = {
                userid:this.LoginUser.id
            }

            let result = await this.$u.api.user.Index(data)

            if(result.data.length < 0)
            {
                this.addrlist = [
                    [
                        {
                            name:'暂无上门地址'
                        }
                    ]
                ]

                return false
            }

            let list = []

            this.addrlist = []

            for(let item of result.data)
            {
                list.push({
                    id:item.id,
                    name:item.provinces.name+item.citys.name+item.districts.name+item.address
                })
            }

            this.addrlist.push(list)


        },
        AddrChange(item)
        {
            let value = item.value[0]

            this.project.addrid = value.id

            this.project.address = value.name

            this.AddrShow = false
        },
        DateChange(item)
        {
            this.project.createtime = item.value

            this.project.createtime_text = this.$u.timeFormat(item.value, 'yyyy-mm-dd hh:MM:ss')

            let now = Number(new Date()) + 60 * 60 * 1000

            if(item.value < now)
            {
                this.$refs.notice.show({
                    type:'error',
                    message:'请提前一个小时',
                    icon:true
                })
                return false
            }

            this.DateShow = false

        },
        submit()
        {
            this.$refs.add.validate().then(async (res) => {
                let data = {
                    userid:this.LoginUser.id,
                    addrid:this.project.addrid,
                    projectid:this.project.projectid,
                    content:this.project.content,
                    createtime:Math.floor(this.project.createtime / 1000)
                }

                let result = await this.$u.api.project.OrderAdd(data)

                if(result.code === 1)
                {
                    this.$refs.uNotify.show({
                        type:'success',
                        message:result.msg,
                        duration:1500
                    })

                    setTimeout(() => {
                        this.$u.route({
                            url:result.url,
                            type:'reLaunch'
                            
                        })
                    }, 1500);

                    return false
                }else{
                    this.$refs.uNotify.show({
                        type:'error',
                        message:result.msg,
                        duration:1500
                    })

                    return false
                }
                
            }).catch(() => {})
        }
    }
}
</script>

<style>
.uni-margin-wrap {
    width: 690rpx;
    width: 100%;
}

.swiper {
    width: 100%;
    height: 400rpx;
    margin-bottom: 50rpx;
}

.swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
}

.uni-margin-wrap image {
    width: 100%;
}

.service {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.service {
    width: 670rpx;
    height: auto;
    padding: 20rpx 45rpx 20rpx 35rpx;
    border-bottom: 1rpx solid #CCCCCC;
}

.service-name {
    width: 80%;
    font-size: 36rpx;
}

.service-price {
    font-size: 36rpx;
}

picker {
    color: #000;
    padding: 20rpx;
    border-radius: 20rpx;
    font-size: 36rpx;
    border: 1rpx solid #CCC;
    margin: 20rpx;
    box-shadow: 0 0 10px #DDD;
}

button {
    width: 400rpx;
    background-color: #0173DE;
    color: white;
    opacity: 0.7;
    box-shadow: 0 0 10px #DDD;
    font-size: 34rpx;
    margin-bottom: 30rpx;
}

.button-hover {

    color: white;
    opacity: 1;
    background-color: #0173DE;
}

.but {
    margin-top: 50rpx;
}

picker view {
    font-size: 30rpx;
}

.project {
    width: 90%;
    margin: 0 auto;
}

.project .item {
    color: #000;
    padding: 0rpx 20rpx;
    border-radius: 20rpx;
    font-size: 36rpx;
    border: 1rpx solid #CCC;
    margin: 20rpx;
    box-shadow: 0 0 10px #DDD;
    background-color: #fff;
}

.project .item .u-form-item {
    padding: 0rpx;
}

.project .u-input {
    background-color: rgba(0, 0, 0, 0) !important;
}
</style>
